<template>
  <div class="flex mt-5 mb-5">
    <div class="flex-grow">
      <div class="w-full bg-white border divide-y">
        <div class="w-full p-4 text-gray-500 text-lg">关系图谱</div>
        <div class="w-full p-4">
          <Relation :data="relationData" />
        </div>
      </div>
    </div>
    <div class="w-1/3">
      <div class="bg-white border ml-5 divide-y">
        <div class="w-full p-4 text-gray-500 text-lg">关注</div>
        <div class="w-full p-4">
          <div
            class="text-gray-500 text-center"
            v-if="partFollowing.length === 0"
          >
            暂无
          </div>
          <FollowerInfo
            v-for="item in partFollowing"
            :key="item.id"
            :info="item"
          />
        </div>
        <div
          v-show="partFollowingCount < following.length"
          class="text-center p-2 text-gray-500 pointer"
          @click="partFollowingCount += 5"
        >
          更多
        </div>
      </div>
      <div class="bg-white border ml-5 divide-y mt-3">
        <div class="w-full p-4 text-gray-500 text-lg">粉丝</div>
        <div class="w-full p-4">
          <div
            class="text-gray-500 text-center"
            v-if="partFollower.length === 0"
          >
            暂无
          </div>
          <FollowerInfo
            v-for="item in partFollower"
            :key="item.id"
            :info="item"
          />
        </div>
        <div
          v-show="partFollowerCount < follower.length"
          class="text-center p-2 text-gray-500 pointer"
          @click="partFollowerCount += 5"
        >
          更多
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import FollowerInfo from './components/FollowerInfo.vue'
import Relation from './components/Relation.vue'
import api from '@/api/api'

const route = useRoute()
const message = useMessage()

const relationData = ref(null)

const following = ref([])
const follower = ref([])

const partFollowing = ref([])
const partFollower = ref([])

const partFollowingCount = ref(5)
const partFollowerCount = ref(5)

watch(
  () => following.value,
  () => {
    partFollowingCount.value = 5
    partFollowing.value = following.value.slice(0, partFollowingCount.value - 1)
  }
)

watch(
  () => partFollowingCount.value,
  () => {
    partFollowing.value = following.value.slice(0, partFollowingCount.value - 1)
  }
)

watch(
  () => follower.value,
  () => {
    partFollowerCount.value = 5
    partFollower.value = follower.value.slice(0, partFollowerCount.value - 1)
  }
)

watch(
  () => partFollowerCount.value,
  () => {
    partFollower.value = follower.value.slice(0, partFollowerCount.value - 1)
  }
)

watch(
  () => route.params,
  () => {
    init()
  }
)

onMounted(() => {
  init()
})

const init = () => {
  api.User.getFollowList({ id: route.params.id }).then((res) => {
    if (res.success) {
      following.value = res.data.following
      follower.value = res.data.follower
    } else {
      message.error(res.msg)
    }
  })
  api.User.getRelation({ id: route.params.id }).then((res) => {
    if (res.success) {
      relationData.value = res.data
    } else {
      message.error(res.msg)
    }
  })
}
</script>

<style scoped>
.pointer {
  cursor: pointer;
}
</style>
